<template>
  <div class="iframe-body-sty">
    <el-row style="margin-top: 5px;">
      <el-col :span="10">
        <el-button type="primary" @click="before">上一步</el-button>
      </el-col>
        <el-button type="primary" @click="after">下一步</el-button>
    </el-row>
    <iframe id="iframe-shrink" :src="url" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // address:this.$route.query.url,
        url: 'https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner',
      }
  },
  mounted() {
      /**
       * iframe-宽高自适应显示
       */
      function changeMobsfIframe() {
        const mobsf = document.getElementById('iframe-shrink');
        const deviceWidth = document.body.clientWidth;
        const deviceHeight = document.body.clientHeight;
        mobsf.style.width = (Number(deviceWidth) - 0) + 'px'; //数字是页面布局宽度差值
        mobsf.style.height = (Number(deviceHeight) - 0) + 'px'; //数字是页面布局高度差
      }

      changeMobsfIframe()

      window.onresize = function() {
        changeMobsfIframe()
      }
    },
    methods:{
      //上一步功能
      before(){
        this.$router.go(-1);
      },
      //下一步功能
      after(){
        this.$router.go(1);
      },
    },
    created() {
      console.log("asdasd");
      console.log(this.$route.query.url);
      this.url='https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner&city='+this.$route.query.url
    }
  // head() {
  //   return {
  //     meta: [{
  //       hid: 'description',
  //       'http-equiv': 'Content-Security-Policy',
  //       content: 'upgrade-insecure-requests'
  //     }]
  //   }
  // },
  }
</script>
<style>
  .iframe-body-sty {
    position: relative;
    overflow: hidden;
    margin-left: -20px;
    margin-top: -25px;
    height: 600px;
    width: 1250px;
    /* background-color: red; */
  }

  .iframe-body-sty>#iframe-shrink {
    position: absolute;
    transform: scale(0.8);
    left: -155px;
    top: -20px;
  }
</style>
